<template>
    <!-- <div class="home">
        <div class="home-center clearfix" v-if="false">
            <ul class="home-news">
                <a href="#" style="color: #000">
                    <img
                        style="
                            width: 22px;
                            height: 22px;
                            vertical-align: middle;
                        "
                        src="../assets/icons/xiaoxi.png"
                        alt=""
                    />
                    <span style="margin-left: 10px"
                        >[2021-04-01]测试消息通告</span
                    >
                </a>
            </ul>
        </div>
        <div class="box">
            <div class="title">资源列表信息</div>
            <div class="itembox">
                <div class="item">
                    <img src="../assets/icons/cloud.png" alt="" />
                    <div>
                        <span>{{ResourceList.yzjNum}}</span>
                        云主机（个）
                    </div>
                </div>
                <div class="item" style="margin-left: 14px">
                    <img src="../assets/icons/yingpan.png" alt="" />
                    <div>
                        <span>{{ResourceList.yypNum}}</span>
                        云硬盘（TB）
                    </div>
                </div>
                <div class="item">
                    <img src="../assets/icons/xdragon.png" alt="" />
                    <div>
                        <span>{{ResourceList.ljsNum}}</span>
                        高性能（个）
                    </div>
                </div>
                <div class="item" style="margin-left: 14px">
                    <img src="../assets/icons/yingyonganquan.png" alt="" />
                    <div>
                        <span>{{ResourceList.yyaqNum}}</span>
                        应用安全（套）
                    </div>
                </div>
            </div>
        </div>
        <div class="securityChart">
            <div class="title">安全概况</div>
            <div id="main" style="width: 100%; height: calc(100% - 40px)"></div>
        </div>
        <div></div>
        <div class="TrendChart">
            <div id="LineChart" style="width: 100%; height: 100%"></div>
        </div>
        <div class="todo">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span @click="JumpTodo" style="font-size: 16px; font-weight: bold;cursor: pointer;" title="跳转至我的待办列表"
                        >我的待办</span
                    >
                </div>
                <div v-for="(item,index) in taskTodoList" :key="index" @click="showDetail(item)" class="text item" style="margin: 8px 0;cursor: pointer;">
                    {{ item.instanceName}}
                </div>
            </el-card>
        </div>
    </div> -->
    <div class="app-container">
        <div v-show="!open" v-if="!needChangePassword">
            <el-form
                @submit.native.prevent
                :model="queryParams"
                ref="queryForm"
                :inline="true"
                v-show="showSearch"
                label-width="68px"
            >
                <el-form-item label="任务名称" prop="taskName">
                    <el-input
                        v-model="queryParams.taskName"
                        placeholder="请输入任务名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="cyan"
                        icon="el-icon-search"
                        size="mini"
                        @click="handleQuery"
                        >搜索</el-button
                    >
                    <el-button
                        icon="el-icon-refresh"
                        size="mini"
                        @click="resetQuery"
                        >重置</el-button
                    >
                </el-form-item>
            </el-form>

            <el-row :gutter="10" class="mb8">
                <right-toolbar
                    :showSearch.sync="showSearch"
                    @queryTable="getList"
                ></right-toolbar>
            </el-row>
            <el-table v-loading="loading" :data="taskList">
                <el-table-column label="任务ID" prop="taskId" width="150" />
                <el-table-column label="任务名称" prop="taskName" />
                <el-table-column label="是否信创" prop="isXC">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.isXc == true" type="danger" effect="plain">信创</el-tag>
                        <el-tag v-else type="info" effect="plain">非信创</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="标题" prop="instanceName" />
                <el-table-column label="流程" prop="definitionName" />
                <el-table-column
                    label="创建时间"
                    prop="createTime"
                    width="150"
                />
                <el-table-column label="状态" prop="state" />
                <el-table-column
                    label="操作"
                    width="140"
                    class-name="small-padding fixed-width"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-search"
                            :loading="btnLoading"
                            @click="showDetail(scope.row)"
                            >审批</el-button
                        >
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-time"
                            :loading="btnLoading"
                            @click="showHistory(scope.row)"
                            >审批历史</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />
        </div>
        <div v-show="open" :title="title" :visible.sync="open" width="90%">
            <applyDetails
                :priceFlag="priceFlag"
                :form="form"
                v-if="definitionName == '资源申请'"
            />
            <changeDetails v-if="definitionName == '资源变更'" />
            <div class="title" style="margin-top: 30px">流程图</div>
            <Process ref="process" style="margin-bottom: 10px" />
            <div class="title" style="margin-top: 30px">审批流程</div>
            <div class="xx">
                <ul class="timeline-wrapper">
                    <li
                        class="timeline-item"
                        v-for="t in timelineList"
                        :key="t.id"
                    >
                        <div class="timeline-box">
                            <div class="out-circle">
                                <div class="in-circle"></div>
                            </div>
                            <div class="long-line"></div>
                        </div>
                        <div class="timeline-content">
                            <div class="box">
                              <div class="timeline-title">{{ t.name }}</div>
                              <div class="timeline-date">{{ t.time }}</div>
                            </div>
                            <div class="timeline-desc" style="margin-bottom : 10px">{{ t.assigneeName }} <span :style="ActionColorStatus(t.action)">{{ t.actionName }}</span></div>
                            <div class="timeline-desc" v-if="t.action">审批意见：{{ t.comment }}</div>
                        </div>
                    </li>
                </ul>
            </div>
            <applyButton
                v-if="definitionName == '资源申请'"
                @openClose="openClose"
                :taskId="taskId"
                :taskName="taskName"
                :detail="form"
            />
            <changeButton
                v-if="definitionName == '资源变更'"
                @openClose="openClose"
                :taskId="taskId"
                :taskName="taskName"
                :detail="form"
            />
        </div>

        <el-dialog :title="title" :visible.sync="openHistory" width="90%">
            <el-table v-loading="historyLoading" :data="historyList">
                <el-table-column label="ID" width="100" prop="id" />
                <el-table-column label="节点" prop="name" />
                <el-table-column label="处理人" prop="assigneeName" />
                <el-table-column label="开始时间" prop="startTime" />
                <el-table-column label="结束时间" prop="endTime" />
                <el-table-column label="处理方式" prop="actionName" />
                <el-table-column label="意见" prop="comment" />
            </el-table>
            <pagination
                v-show="historyTotal > 0"
                :total="historyTotal"
                :page.sync="historyParams.pageNum"
                :limit.sync="historyParams.pageSize"
                @pagination="getHistory"
            />
        </el-dialog>
    </div>
</template>

<script>
// --------------原首頁引用------------
// import echarts from "echarts";
// import { taskTodoList } from "@/api/todoItem/todo.js";
// import {resourcesListInfo,resourcesCurce} from '@/api/index/index.js'
// --------------原首頁引用------------

import request from "@/utils/request";
import { taskTodoList } from "@/api/todoItem/todo.js";
import { listHistory } from "@/api/activiti/example.js";

import { instId, serviceByClazz, listByCode ,formResourceUp } from "@/api/resources/apply.js";

import { getChangeDetail } from "@/api/resources/change.js";
import { getDicts } from "@/api/system/dict/data";

// import Details from "./details.vue";
import Details from "./todoItem/todo/details.vue";

// import applyDetails from "../../resources/apply/addC.vue";
import applyDetails from "./resources/apply/addC.vue";
// import applyButton from "../../resources/apply/button.vue";
import applyButton from "./resources/apply/button.vue";

// import changeDetails from "../../resources/change/details.vue";
import changeDetails from "./resources/change/details.vue";
// import changeButton from "../../resources/change/button.vue";
import changeButton from "./resources/change/button.vue";

// import Process from "./process.vue";
import Process from "./todoItem/todo/process.vue";

export default {
    name: "index",
    // -------新待办移植-------------
    components: {
        Process,
        Details,

        applyDetails,
        applyButton,

        changeDetails,
        changeButton,
    },
    // -------新待办移植-------------
    data() {
        return {
            // --------------原首頁引用------------
            // version: "3.2.1",
            // taskTodoList : [],
            // ResourceList:{},
            // resourcesCurceList :{}
            // --------------原首頁引用------------

            needChangePassword : JSON.parse(sessionStorage.getItem('needChangePassword')),
            timelineList: [],
            // 遮罩层
            loading: true,
            btnLoading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 待办表格数据
            taskList: [],
            // 弹出层标题
            title: "",
            // 显示/隐藏审批历史
            openHistory: false,
            // 审批历史遮罩层
            historyLoading: false,
            // 审批历史列表
            historyList: [],
            // 审批历史列表数量
            historyTotal: 0,

            // 审批历史查询参数
            historyParams: {
                pageNum: 1,
                pageSize: 10,
                // taskId: null,
                // taskName: null,
            },
            // 任务id
            taskId: "",
            // 流程
            definitionName: "",
            // 节点
            taskName: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                // taskId: null,
                // taskName: null,
            },

            // 表单校验
            rules: {},

            //数据详情
            form: {},
            //配置
            configure: {
                available_domain: [], //可用域
                cloud_service_provider: [], //服务商
                storage_type: [], //系统盘类型
                codeList: [], //云服务器规格列表
                czxtList: [], //操作系统列表
                ccList: [], //数据盘类型
                fwcpList: [], //服务型磁盘类型
                wlfwqList: [], //高性能服务器资源类型
                sjkList: [], //数据库类型
                yyaqList: [], //安全产品
            },
            //是否显示预估费用
            priceFlag: false,
        };
    },
    watch: {
        $route(route) {
          if(route.fullPath == '/index'){
              if(this.needChangePassword){
                this.$router.push('/user/profile')
                return
            }
          }
        },
    },
    created() {
        // --------------原首頁引用------------
        // this.GetresourcesListInfo()
        // --------------原首頁引用------------
        if(this.needChangePassword){
            this.$message({
                message: '请你必须修改密码，才能继续使用！',
                type: 'warning'
            });
            this.$router.push('/user/profile')
            return
        }
        this.getList();
    },
    mounted() {
        // --------------原首頁引用------------
        // this.anquan();
        // this.GetresourcesCurce()
        // this.GettaskTodoList()
        // --------------原首頁引用------------
    },
    methods: {
        // 返回审核意见颜色状态
        ActionColorStatus(name){
          if(name == 'COMPLETE'){
            return `margin-left: 10px;color : #008000`
          }else if(name == 'BACK'){
            return `margin-left: 10px;color : #ffff00`
          }else if(name == 'REJECT'){
            return `margin-left: 10px;color : #ffff00`
          }else if(name == 'DELEGATE'){
            return `margin-left: 10px;color : #ffff00`
          }else if(name == 'JUMP'){
            return `margin-left: 10px;color : #ffff00`
          }else if(name == 'DELETE'){
            return `margin-left: 10px;color : #ff0000`
          }else{
            return `margin-left: 10px;`
          }
        },
        //获取配置信息
        getDicts() {
            for (let item in this.configure) {
                getDicts(item).then((response) => {
                    this.configure[item] = response.data;
                });
            }
        },

        //关闭弹窗
        openClose(flag) {
            this.open = false;
            if (flag) {
                this.getList();
            }
        },
        // 审批历史查询
        formResourceUps(id){
          formResourceUp(id).then(res=>{
            this.timelineList = res.rows
          })
        },
        //显示详情-----------------------------------------------
        showDetail(data) {
            this.title = data.taskName;
            this.taskId = data.taskId;
            this.definitionName = data.definitionName;
            this.taskName = data.taskName;
            if (data.definitionName == "资源申请") {
                // this.formResourceUps(data.instanceId)
                this.instIdDetail(data);
                // instanceId
            } else if (data.definitionName == "资源变更") {
                // this.formResourceUps(data.instanceId)
                this.changeDetail(data);
            }else if(data.definitionName == "ip资源管理 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('IPResourceManager',arr)
                this.$router.push("/resources/IPResourceManagers/details");
            }else if(data.definitionName == "应用故障 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('ApplicationFailures',arr)
                this.$router.push("/faultdeclara/ApplicationFailures/details");
            }else if(data.definitionName == "操作系统故障 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('systemFailures',arr)
                this.$router.push("/faultdeclara/systemFailures/details");
            }else if(data.definitionName == "网络故障 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('NetworkFailures',arr)
                this.$router.push("/faultdeclara/NetworkFailures/details");
            }else if(data.definitionName == "云平台故障 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('CloudFailures',arr)
                this.$router.push("/faultdeclara/CloudFailures/details");
            }else if(data.definitionName == "安全故障 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('SafetyFailures',arr)
                this.$router.push("/faultdeclara/SafetyFailures/details");
            }else if(data.definitionName == "数据交互 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('ArrayInteractions',arr)
                this.$router.push("/businessassistance/ArrayInteractions/details");
            }else if(data.definitionName == "端口管理 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('InterfaceManagements',arr)
                this.$router.push("/businessassistance/InterfaceManagements/details");
            }else if(data.definitionName == "访问权限 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('AccessRights',arr)
                this.$router.push("/businessassistance/AccessRightss/details");
            }else if(data.definitionName == "进出机房 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('InOutComputerRooms',arr)
                this.$router.push("/businessassistance/InOutComputerRooms/details");
            }else if(data.definitionName == "系统升级/变更 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('SystemUpgrades',arr)
                this.$router.push("/businessassistance/SystemUpgrades/details");
            }else if(data.definitionName == "托管设备上下架 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('ManagedDevices',arr)
                this.$router.push("/businessassistance/ManagedDevices/details");
            }else if(data.definitionName == "压力/安全测试 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('PressureSafetyTests',arr)
                this.$router.push("/businessassistance/PressureSafetyTests/details");
            }else if(data.definitionName == "域名备案 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('DomainNameFilings',arr)
                this.$router.push("/businessassistance/DomainNameFilings/details");
            }else if(data.definitionName == "找回备案号密码 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('RetrieveRecordPasswords',arr)
                this.$router.push("/businessassistance/RetrieveRecordPasswords/details");
            }else if(data.definitionName == "其他事项 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('OtherMatterss',arr)
                this.$router.push("/businessassistance/OtherMatterss/details");
            }


        },
        // 查询资源申请详情
        instIdDetail(dat) {
            // 信创申请
            if(dat.isXc){
                var arr=JSON.stringify(dat)
                sessionStorage.setItem('DetailsAgency',arr)
                this.$router.push("/todoItem/todoS/DetailsAgency");
            }else{
                var arr=JSON.stringify(dat)
                sessionStorage.setItem('DetailsAgencyNoXc',arr)
                this.$router.push("/todoItem/todoS/DetailsAgencyNoXc");
            }
        },
        // 查询资源变更详情
        changeDetail(data) {
            // 信创变更
            if(data.isXc){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('ChangeDetailsAgency',arr)
                this.$router.push("/todoItem/todoS/ChangeDetailsAgency");
            }else{
                var arr=JSON.stringify(data)
                sessionStorage.setItem('ChangeDetailsAgencyNoXc',arr)
                this.$router.push("/todoItem/todoS/ChangeDetailsAgencyNoXc");
            }
        },

        //获取一些配置数据
        getDataOfAdd() {
            //可用域
            getDicts("available_domain").then((response) => {
                this.configure.available_domain = response.data;
            });
            //服务商
            getDicts("cloud_service_provider").then((response) => {
                this.configure.cloud_service_provider = response.data;
            });
            //盘类型
            serviceByClazz({ code: "cc" }).then((response) => {
                response.data.forEach((item) => {
                    if (
                        ["FCcc(tykcc)2", "FCcc_ssd", "spycc2"].indexOf(
                            item.code
                        ) < 0
                    ) {
                        this.configure.storage_type.push(item);
                    }
                    if (["spycc2"].indexOf(item.code) < 0) {
                        this.configure.ccList.push(item);
                    }
                    if (
                        ["fbscc_wjcc2", "FCcc(tykcc)2", "FCcc_ssd"].indexOf(
                            item.code
                        ) < 0
                    ) {
                        this.configure.fwcpList.push(item);
                    }
                });
            });
            //操作系统
            serviceByClazz({ code: "czxt" }).then((response) => {
                this.configure.czxtList = response.data;
            });
            //云服务器规格列表
            listByCode("spec_ecs").then((response) => {
                this.configure.codeList = response.data;
            });
            //高性能服务器资源类型列表
            serviceByClazz({ code: "wlfwq" }).then((response) => {
                this.configure.wlfwqList = response.data;
            });
            //数据库类型列表
            serviceByClazz({ code: "sjk" }).then((response) => {
                this.configure.sjkList = response.data;
            });
            //安全产品列表
            serviceByClazz({ code: "yyaq" }).then((response) => {
                this.configure.yyaqList = response.data;
            });
        },

        /** 查询审批历史 */
        showHistory(data) {
            this.historyList = [];
            this.title = data.taskName;
            this.openHistory = true;
            this.historyParams = {
                pageNum: 1,
                pageSize: 10,
                processInstanceId: data.instanceId,
            };
            this.getHistory();
        },
        getHistory() {
            this.btnLoading = true;
            this.historyLoading = true;
            listHistory(this.historyParams)
                .then((response) => {
                    this.historyList = response.rows;
                    this.historyTotal = response.total;
                    this.historyLoading = false;
                })
                .finally(() => {
                    this.btnLoading = false;
                });
        },

        /** 查询待办列表 */
        getList() {
            this.loading = true;
            taskTodoList(this.queryParams).then((response) => {
                this.taskList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                taskId: null,
                taskName: null,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.taskName = ''
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加待办";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids;
            getDemo(id).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = "修改待办";
            });
        },


        // --------------原首頁引用------------
        showDetail(data) {
             if (data.definitionName == "资源申请") {
                this.instIdDetail(data);
            } else if (data.definitionName == "资源变更") {
                this.changeDetail(data);
            }else if(data.definitionName == "ip资源管理 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('IPResourceManager',arr)
                this.$router.push("/resources/IPResourceManagers/details");
            }else if(data.definitionName == "应用故障 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('ApplicationFailures',arr)
                this.$router.push("/faultdeclara/ApplicationFailures/details");
            }else if(data.definitionName == "操作系统故障 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('systemFailures',arr)
                this.$router.push("/faultdeclara/systemFailures/details");
            }else if(data.definitionName == "网络故障 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('NetworkFailures',arr)
                this.$router.push("/faultdeclara/NetworkFailures/details");
            }else if(data.definitionName == "云平台故障 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('CloudFailures',arr)
                this.$router.push("/faultdeclara/CloudFailures/details");
            }else if(data.definitionName == "安全故障 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('SafetyFailures',arr)
                this.$router.push("/faultdeclara/SafetyFailures/details");
            }else if(data.definitionName == "数据交互 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('ArrayInteractions',arr)
                this.$router.push("/businessassistance/ArrayInteractions/details");
            }else if(data.definitionName == "端口管理 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('InterfaceManagements',arr)
                this.$router.push("/businessassistance/InterfaceManagements/details");
            }else if(data.definitionName == "访问权限 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('AccessRights',arr)
                this.$router.push("/businessassistance/AccessRightss/details");
            }else if(data.definitionName == "进出机房 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('InOutComputerRooms',arr)
                this.$router.push("/businessassistance/InOutComputerRooms/details");
            }else if(data.definitionName == "系统升级/变更 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('SystemUpgrades',arr)
                this.$router.push("/businessassistance/SystemUpgrades/details");
            }else if(data.definitionName == "托管设备上下架 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('ManagedDevices',arr)
                this.$router.push("/businessassistance/ManagedDevices/details");
            }else if(data.definitionName == "压力/安全测试 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('PressureSafetyTests',arr)
                this.$router.push("/businessassistance/PressureSafetyTests/details");
            }else if(data.definitionName == "域名备案 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('DomainNameFilings',arr)
                this.$router.push("/businessassistance/DomainNameFilings/details");
            }else if(data.definitionName == "找回备案号密码 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('RetrieveRecordPasswords',arr)
                this.$router.push("/businessassistance/RetrieveRecordPasswords/details");
            }else if(data.definitionName == "其他事项 "){
                var arr=JSON.stringify(data)
                sessionStorage.setItem('OtherMatterss',arr)
                this.$router.push("/businessassistance/OtherMatterss/details");
            }
        },
        // instIdDetail(dat){
        //     var arr=JSON.stringify(dat)
        //     sessionStorage.setItem('DetailsAgency',arr)
        //     this.$router.push("/todoItem/todoS/DetailsAgency");
        // },
        // changeDetail(data){
        //     var arr=JSON.stringify(data)
        //     sessionStorage.setItem('ChangeDetailsAgency',arr)
        //     this.$router.push("/todoItem/todoS/ChangeDetailsAgency");
        // },
        GetresourcesListInfo(){
            resourcesListInfo().then(res=>{
                this.ResourceList = res.data
            })
        },
        GetresourcesCurce(){
            resourcesCurce({
                days : 7
            }).then(res=>{
                this.resourcesCurceList = res.data
                this.LineCharts(this.resourcesCurceList)
            })
        },
        // 获取我的待办信息列表
        GettaskTodoList(){
            taskTodoList({
                pageNum: 1,
                pageSize: 10,
            }).then(res=>{
                this.taskTodoList = res.rows
            })
        },
        // 待办跳转
        JumpTodo(){
            this.$router.push({path:'/todoItem/todo'})
        },
        goTarget(href) {
            window.open(href, "_blank");
        },
        anquan() {
            var myChart = echarts.init(document.getElementById("main"));
            var dataArr = 100;
            myChart.setOption({
                backgroundColor: "rgb(231,236,240)",
                title: {
                    show: true,
                    text: "安全系数",
                    x: "50%",
                    y: "57%",
                    z: 8,
                    textAlign: "center",
                    textStyle: {
                        color: "#f1f7fe",
                        fontSize: 14,
                        fontWeight: "normal",
                    },
                },
                series: [
                    {
                        name: "内部（环形）进度条",
                        type: "gauge",
                        // center: ['20%', '50%'],
                        radius: "60%",
                        splitNumber: 10,
                        axisLine: {
                            lineStyle: {
                                color: [
                                    [dataArr / 100, "#458EFD"],
                                    [1, "#FFFFFF"],
                                ],
                                width: 14,
                            },
                        },
                        axisLabel: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        pointer: {
                            show: false,
                        },
                    },
                    {
                        name: "外部刻度",
                        type: "gauge",
                        //  center: ['20%', '50%'],
                        radius: "70%",
                        min: 0, //最小刻度
                        max: 100, //最大刻度
                        splitNumber: 10, //刻度数量
                        startAngle: 225,
                        endAngle: -45,
                        axisLine: {
                            show: true,
                            // 仪表盘刻度线
                            lineStyle: {
                                width: 2,
                                color: [[1, "#FFFFFF"]],
                            },
                        },
                        //仪表盘文字
                        axisLabel: {
                            show: true,
                            color: "#868FDF",
                            distance: 25,
                            formatter: function (v) {
                                switch (v + "") {
                                    case "0":
                                        return "0";
                                    case "10":
                                        return "10";
                                    case "20":
                                        return "20";
                                    case "30":
                                        return "30";
                                    case "40":
                                        return "40";
                                    case "50":
                                        return "50";
                                    case "60":
                                        return "60";
                                    case "70":
                                        return "70";
                                    case "80":
                                        return "80";
                                    case "90":
                                        return "90";
                                    case "100":
                                        return "100";
                                }
                            },
                        }, //刻度标签。
                        axisTick: {
                            show: true,
                            splitNumber: 7,
                            lineStyle: {
                                color: "#3082FE", //用颜色渐变函数不起作用
                                width: 2,
                            },
                            length: -8,
                        }, //刻度样式
                        splitLine: {
                            show: true,
                            length: -20,
                            lineStyle: {
                                color: "#458EFD", //用颜色渐变函数不起作用
                            },
                        }, //分隔线样式
                        detail: {
                            show: false,
                        },
                        pointer: {
                            show: false,
                        },
                    },
                    /*内部*/
                    {
                        type: "pie",
                        radius: ["0", "40%"],
                        center: ["50%", "50%"],
                        z: 8,
                        hoverAnimation: false,
                        data: [
                            {
                                name: "检查进度",
                                value: dataArr,
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(
                                            0,
                                            0,
                                            0,
                                            1,
                                            [
                                                {
                                                    offset: 0,
                                                    color: "#3398ff",
                                                },
                                                {
                                                    offset: 1,
                                                    color: "#7db0fd",
                                                },
                                            ]
                                        ),
                                    },
                                },
                                label: {
                                    normal: {
                                        formatter: function (params) {
                                            return params.value + "%";
                                        },
                                        color: "#FFFFFF",
                                        fontSize: 20,
                                        fontWeight: "bold",
                                        position: "center",
                                        show: true,
                                    },
                                },
                                labelLine: {
                                    show: false,
                                },
                            },
                        ],
                    },
                    /*外一层*/
                    {
                        type: "pie",
                        radius: "45%",
                        startAngle: 200,
                        endAngle: -40,
                        hoverAnimation: false,
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [
                            {
                                value: 1,
                                itemStyle: {
                                    normal: {
                                        color: "#8DC4FD",
                                    },
                                },
                            },
                        ],
                    },
                    //外二层圈
                    {
                        type: "pie",
                        radius: "50%",
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        z: 0,
                        hoverAnimation: false,
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [
                            {
                                value: 1,
                                itemStyle: {
                                    normal: {
                                        color: "#e3edf8",
                                    },
                                },
                            },
                        ],
                    },
                ],
            });
        },
        LineCharts(item) {
            var myChart = echarts.init(document.getElementById("LineChart"));
            myChart.setOption({
                title: {
                    text: "资源分配趋势(近七天)",
                },
                tooltip: {
                    trigger: "axis",
                    formatter: function(params) {
                        let str = `<div>${params[0].axisValue}</div>`;
                        params.forEach((item, idx) => {
                            str += `${item.marker}${item.seriesName}  : `
                            switch (idx){
                                case 0:
                                    str +=  item.data + '   核';
                                    break;
                                case 1:
                                    str += item.data+'   GB';
                                    break;
                                default:
                                    str += item.data+'   TB';
                                    break;
                            }
                            str += idx === params.length -1? '': '<br/>'
                        })
                        return str
                    }
                },
                legend: {
                    data: ["CPU", "内存", "存储"],
                },
                grid: {
                    left: "0%",
                    right: "3%",
                    bottom: "3%",
                    containLabel: true,
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false, //坐标轴两边留白
                    data: item.date,
                    // data: [
                    //     "1月",
                    //     "2月",
                    //     "3月",
                    //     "4月",
                    //     "5月",
                    //     "6月",
                    //     "7月",
                    //     "8月",
                    //     "9月",
                    //     "10月",
                    //     "11月",
                    //     "12月",
                    // ],
                    axisLabel: {
                        //坐标轴刻度标签的相关设置。
                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
                        //	margin:15,
                        textStyle: {
                            color: "#1B253A",
                            fontStyle: "normal",
                            fontFamily: "微软雅黑",
                            fontSize: 12,
                        },
                        formatter: function (params) {
                            var newParamsName = "";
                            var paramsNameNumber = params.length;
                            var provideNumber = 10; //一行显示几个字
                            var rowNumber = Math.ceil(
                                paramsNameNumber / provideNumber
                            );
                            if (paramsNameNumber > provideNumber) {
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = "";
                                    var start = p * provideNumber;
                                    var end = start + provideNumber;
                                    if (p == rowNumber - 1) {
                                        tempStr = params.substring(
                                            start,
                                            paramsNameNumber
                                        );
                                    } else {
                                        tempStr =
                                            params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;
                                }
                            } else {
                                newParamsName = params;
                            }
                            return newParamsName;
                        },
                        //rotate:50,
                    },
                    axisTick: {
                        //坐标轴刻度相关设置。
                        show: false,
                    },
                    axisLine: {
                        //坐标轴轴线相关设置
                        lineStyle: {
                            color: "#E5E9ED",
                            // opacity:0.2
                        },
                    },
                    splitLine: {
                        //坐标轴在 grid 区域中的分隔线。
                        show: true,
                        lineStyle: {
                            color: "#E5E9ED",
                            // 	opacity:0.1
                        },
                    },
                },
                yAxis: [
                    {
                        type: "value",
                        splitNumber: 5,
                        axisLabel: {
                            textStyle: {
                                color: "#a8aab0",
                                fontStyle: "normal",
                                fontFamily: "微软雅黑",
                                fontSize: 12,
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#E5E9ED",
                                // 	opacity:0.1
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "CPU",
                        type: "line",
                        itemStyle: {
                            normal: {
                                color: "rgb(34,177,76)",
                                lineStyle: {
                                    color: "rgb(34,177,76)",
                                    width: 1,
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 0,
                                                color: "rgba(34,177,76,0)",
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(34,177,76,0.35)",
                                            },
                                        ]
                                    ),
                                },
                            },
                        },
                        // data: [1, 2, 3, 3, 5, 6, 5, 3, 6, 5, 5, 4],
                        data: item.cpu,
                    },
                    {
                        name: "内存",
                        type: "line",
                        itemStyle: {
                            normal: {
                                color: "rgba(0,157,217,1)",
                                lineStyle: {
                                    color: "rgba(0,157,217,1)",
                                    width: 1,
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 0,
                                                color: "rgba(0,157,217,0)",
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(0,157,217,0.35)",
                                            },
                                        ]
                                    ),
                                },
                            },
                        },
                        // data: [9, 5, 7, 8, 6, 7, 8, 7, 7, 6, 8, 6],
                        data: item.memory,
                    },
                    {
                        name: "存储",
                        type: "line",
                        itemStyle: {
                            normal: {
                                color: "rgba(255,80,124,1)",
                                lineStyle: {
                                    color: "rgba(255,80,124,1)",
                                    width: 1,
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 0,
                                                color: "rgba(255,80,124,0)",
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(255,80,124,0.35)",
                                            },
                                        ]
                                    ),
                                },
                            },
                        },
                        // data: [8, 9, 5, 7, 6, 8, 6, 8, 6, 7, 8, 7],
                        data: item.disk,
                    },
                ],
            });
        },
    },
};
</script>

<style scoped lang="scss">
.home {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    .home-center {
        width: calc(100% - 40px);
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
        height: 48px;
        overflow: hidden;
        position: relative;
        line-height: 48px;
        display: flex;
        .home-news {
            width: 100%;
            height: 100%;
            position: relative;
            li {
                width: 100%;
                height: 48px;
                line-height: 48px;
                text-align: left;
                padding: 0 20px;
                font-size: 12px;
                letter-spacing: 2px;
                vertical-align: middle;
                overflow: hidden;
                a {
                    img {
                    }
                    color: #000;
                    span {
                        padding-left: 20px;
                        color: #000;
                    }
                }
            }
        }
        ul li {
            margin: 0;
            padding: 0;
        }
        ul > li {
            list-style: none;
        }
    }
    .notice {
        width: calc(100% - 40px);
        height: 48px;
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
        background-color: aquamarine;
    }
    .box {
        display: inline-block;
        width: calc(70% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 20px;
        background-color: rgb(231, 236, 240);
        .title {
            width: 100%;
            height: 40px;
            font-size: 14px;
            font-weight: bold;
            padding-left: 20px;
            line-height: 40px;
        }
        .itembox {
            width: calc(100% - 24px);
            height: 230px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 14px;
            .item {
                width: calc(50% - 7px);
                height: 70px;
                margin-bottom: 25px;
                background-color: rgb(34, 177, 76);
                position: relative;
                img {
                    position: absolute;
                    top: 50%;
                    left: 130px;
                    transform: translateY(-50%);
                    width: 56px;
                    height: 56px;
                }
                div {
                    position: absolute;
                    top: 50%;
                    left: 230px;
                    transform: translateY(-50%);
                    width: 120px;
                    height: 54px;
                    font-size: 14px;
                    color: #fff;
                    span {
                        font-size: 22px;
                        display: block;
                        font-weight: bold;
                    }
                }
            }
        }
    }
    .securityChart {
        width: calc(30% - 40px);
        height: 270px;
        display: inline-block;
        background-color: rgb(231, 236, 240);
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
        .title {
            // color: #fff;
            width: 100%;
            height: 40px;
            font-size: 14px;
            font-weight: bold;
            padding-left: 20px;
            line-height: 40px;
        }
    }
    .TrendChart {
        width: calc(70% - 40px);
        height: 400px;
        // background-color: blue;
        display: inline-block;
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
        .title {
            width: 100%;
            height: 40px;
            font-size: 14px;
            font-weight: bold;
            padding-left: 20px;
            line-height: 40px;
        }
    }
    .todo {
        width: calc(30% - 40px);
        height: 400px;
        margin-right: 20px;
        margin-left: 20px;
        display: inline-block;
        margin-top: 20px;
        .box-card {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            .item:hover{
                color: deepskyblue;
            }
        }
    }
}
</style>
